<template>
  <div class="dashboard-container">
    <div class="bgc">
      <div
        class="title"
        style="
          width: 100%;
          color: #fff;
          font-weight: 500;
          font-size: 24px;

          box-sizing: border-box;
          padding-left: 20px;
          display: flex;
          align-items: center;
          margin-top: 20px;
          margin-bottom: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div> Input Manual Data</div>
        <el-button size="mini" style="float: right; margin-right: 20px;color: #fff; background-color: transparent;" @click="batchAdd">批量Add</el-button>
      </div>

      <el-table
        class="box"
        :data="tableData"
        :highlight-current-row="false"
        :height="600"
      >
        <el-table-column label="Action">
          <template slot-scope="scope">
            <el-button size="mini" style="background-color: transparent !important; color: #fff !important;" @click="handleAddSensor(scope.row, scope.column,scope.$index)">
              {{ scope.row.sensor_id === 0 ? '选择传感器' : scope.row.sensor_name }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="Timestamp">
          <template slot-scope="scope">
            <div><el-date-picker v-model="scope.row.timestamp" size="mini" value-format="timestamp" :default-value="new Date()" type="datetime" placeholder="选择日期" /></div>
            <div>{{ scope.row.lastTimestamp === 0 ? '':'Last Time :' + formatDateTime(scope.row.lastTimestamp) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="Value">
          <template slot-scope="scope">
            <div><el-input v-model="scope.row.value" type="text" size="mini" /></div>
            <div>{{ scope.row.lastValue === 0 ? '' : 'Last Value :' +scope.row.lastValue }}</div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-dialog
        style="background: #999"
        title="传感器列表"
        :visible.sync="centerDialogVisible"
        width="35%"
        center
      > -->
      <div v-if="centerDialogVisible" class="pop">

        <el-table
          class="box"
          :data="sensorList"
          :highlight-current-row="false"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :height="308"
        >
          <el-table-column prop="id" label="ID" sortable />
          <el-table-column prop="name" label="传感器名称" />
          <el-table-column prop="unit" label="单位" />
          <el-table-column prop="location" label="安装位置" />
          <el-table-column prop="remark" label="备注" />

          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="selectSensorToQuery(scope.index, scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- </el-dialog> -->
    </div>
  </div>
</template>
<script>

import { mapGetters } from 'vuex'
import { sensor_list } from '@/api/sensor'
import { sensor_data_last, batch_add_sensor_data } from '@/api/sensor_data'
import { formatDate } from 'element-ui/src/utils/date-util'

export default {
  data() {
    return {
      tableData: [
        {
          sensor_id: 0,
          sensor_name: '',
          timestamp: 0,
          value: 0,
          lastTimestamp: 0,
          lastValue: 0
        }
      ],
      centerDialogVisible: false,
      sensorTotal: 0,
      sensorList: [],
      currentIndex: 0
    }
  },
  computed: {
    ...mapGetters(['currentProjectId'])
  },
  watch: {
    currentProjectId(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.getSensorList()
      }
    }
  },
  created() {
    this.getSensorList()
  },
  methods: {
    sensorPageChange(index) {
      this.getSensorList(index)
    },
    handleAddSensor(row, column, index) {
      this.centerDialogVisible = !this.centerDialogVisible
      this.currentIndex = index
    },
    getSensorList(page = 1) {
      sensor_list(this.$route.query.project_id, '', page).then(res => {
        if (res.code === 200) {
          this.sensorList = res.data.list
          this.sensorTotal = res.data.total
        }
      })
    },
    selectSensorToQuery(index, sensor) {
      console.log(this.currentIndex)
      this.tableData[this.currentIndex].sensor_id = sensor.id
      this.tableData[this.currentIndex].sensor_name = sensor.name
      this.centerDialogVisible = false
      sensor_data_last(sensor.id).then(res => {
        this.tableData[this.currentIndex].lastTimestamp = res.data.timestamp
        this.tableData[this.currentIndex].lastValue = res.data.value
      })

      if (this.tableData[this.tableData.length - 1].sensor_id > 0) {
        this.tableData.push({
          sensor_id: 0,
          sensor_name: '',
          timestamp: 0,
          value: 0,
          lastTimestamp: 0,
          lastValue: 0
        })
      }
    },
    formatDateTime(timestamp) {
      return formatDate(new Date(timestamp * 1000), 'yyyy-MM-dd HH:mm:ss').toString()
    },
    batchAdd() {
      const data = []
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].sensor_id > 0) {
          data.push({
            sensor_id: this.tableData[i].sensor_id,
            timestamp: this.tableData[i].timestamp / 1000,
            value: this.tableData[i].value
          })
        }
      }

      batch_add_sensor_data(data).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        }
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  .has-gutter{
    background-color: transparent !important;
  }
.bgc {
  width: 90%;
  margin: 0 auto;
  height: 80vh;
  border: 1px solid rgb(101, 166, 231);
  // background-color: red;
  //   width: 400px;
  //  height: 300px;
  //  background-color: #222 !important;
  //  border-radius: 10px;
  //  display: flex;
  //  align-items: center;
  //  justify-content: center;
  //  font-size: 20px;
  //  color: #fff;
  //  font-weight: 800;
  //  position: relative;
  //  z-index: 20;
  // background: url('../../views/images/编组-3-20240612172302722_副本.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // background-color: red;
}
.pop{
    width: 750px;
    height: 550px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: url(../images/弹窗01-20240410102601620.png) ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 999;
   box-sizing: border-box;
   padding: 34px 111px 162px 82px;
}
::v-deep .el-step__title.is-success {
  color: #fff;
}
::v-deep .el-step__title.is-process {
  color: #ccc !important;
}
::v-deep.el-table{
  background-color: transparent !important;
}
::v-deep .el-table tr{
  background-color: transparent !important;
  color: #fff;
}
::v-deep .el-table th{
  background-color: transparent;
}
.demo-ruleForm {
  width: 500px;
  margin: 0 auto;
  margin-top: 20px;
}
.forms {
  width: 800px;
  margin: 0 auto;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  color: #fff;
}
::v-deep .el-textarea__inner {
  background-color: transparent !important;
  color: #fff;
}
::v-deep .el-select:hover .el-input__inner {
  background-color: transparent !important;
}

::v-deep.el-table__body {
  overflow: auto !important;
}

/* 隐藏滚动条 */
::v-deep.el-table__body::-webkit-scrollbar {
  display: none !important;
}
.bgc {
  width: 100%;
  height: 80vh;
  border: 1px solid rgb(101, 166, 231);
  // background-color: red;
  //   width: 400px;
  //  height: 300px;
  //  background-color: #222 !important;
  //  border-radius: 10px;
  //  display: flex;
  //  align-items: center;
  //  justify-content: center;
  //  font-size: 20px;
  //  color: #fff;
  //  font-weight: 800;
  //  position: relative;
  //  z-index: 20;
  // background: url('../../views/images/编组-3-20240612172302722_副本.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  // background-color: red;
}
:v-deep .el-table__fixed-right-patch{
  // display: none !important;
  background-color: red !important;
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper{

}
.bianji{
  width: 100%;
    text-align: center;
    height: 91px;
    line-height: 65px;
    color: #fff;
}
.pop2{
    width: 750px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: url(../images/弹窗01-20240410102601620.png) ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 999;
   box-sizing: border-box;
   padding: 34px 111px 135px 82px;
}
::v-deep .el-button{
  background-color: transparent !important;
}
.pop{
    width: 750px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: url(../images/弹窗01-20240410102601620.png) ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 999;
   box-sizing: border-box;
   padding: 34px 111px 162px 82px;
}
::v-deep .el-table {
  background-color: transparent !important;
  color: #fff !important;
  font-weight: 500;
}
::v-deep .el-date-editor .el-range-separator {
  color: #fff !important;
}
::v-deep .el-picker-panel__body-wrapper {
  background: transparent !important ;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
}
::v-deep .el-range-editor .el-range-input {
  line-height: 1;
  background-color: transparent !important;
}
::v-deep .el-select:hover .el-input__inner {
  background-color: transparent !important;
}
::v-deep .el-table th {
  background-color: transparent !important;
}
::v-deep .el-table {
  background-color: transparent !important;
  color: #fff !important;
  font-weight: 500;
}
::v-deep .el-table__row:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
// ::v-deep .el-table::before {
//   //去除底部白线
//   left: 0;
//   bottom: 0;
//   width: 100%;
//   height: 0px;
// }
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.mt {
  margin: 0 auto;
  margin-top: 20px;
  text-align: center;
}
::v-deep .el-pagination.is-background .el-pager li {
  background-color: transparent !important;
  border: 1px solid #fff;
  color: #fff;
}
::v-deep .el-pagination.is-background .btn-prev {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
::v-deep.el-pagination.is-background .btn-next {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
</style>
